<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义组件</title>
    <script src="../vue3.js"></script>
</head>
<body>
<div id="application">
    <my-alert title="哼-按钮" hhh="dawd" @myclick="appFunc" ></my-alert>
    <my-alert title="哈-按钮"></my-alert>
    <my-alert title="个-按钮"></my-alert>
    <my-alert title="是-按钮"></my-alert>
</div>
<script>
    const app = Vue.createApp({
        methods: {
            appFunc(title) {
                console.log("单击了自定义组件" + title)
            }
        }
    })
    const alertComponent = {
        data() {
            return {
                msg: "警告框提示",
                count: 0
            }
        },
        methods: {
            click() {
                // alert(`[${this.title}]` + this.msg + this.count++)
                console.log(`${this.title}组件内部调用`)
                this.$emit("myclick", this.title)
            }
        },
        props: ["title", "hhh"],
        template: '<div><button :class="hhh" @click="click">{{title}}</button></div>'
    }
    app.component("my-alert", alertComponent);
    app.mount("#application")
</script>
</body>
</html>